<!-- 知识图谱功能 antV G6 版本实现 -->
<script>
import { defineComponent, createApp, h } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
let GraphIns = null;
export default defineComponent({
  name: "knowledge-over-lay",
  components: {
    GlobalCard,
  },
  setup() {
  },
  props: {
  },
  data() {
    return {
      dialogVisible: true,
      active: false,
      categoriesData: [{
        name: '供热关系图',
        color: '#555555',
        size: 60,
        legendIcon: 'react',
        labelFontSize: 30,
        symbol: 'rect'
      }, {
        name: '企业',
        color: '#ee6666',
        size: 30,
        legendIcon: 'rect',
        labelFontSize: 24,
        symbol: 'rect'
      }, {
        name: '热源',
        color: '#91cc75',
        size: 20,
        legendIcon: 'react',
        labelFontSize: 20,
        symbol: 'rect'
      }, {
        name: '换热站',
        color: '#fac858',
        size: 10,
        legendIcon: 'react',
        labelFontSize: 16,
        symbol: 'circle'
      }, {
        name: '供热范围',
        color: '#5470c6',
        size: 5,
        legendIcon: 'circle',
        labelFontSize: 14,
        symbol: 'circle'
      }]
    }
  },
  mounted() {
    this.init();
  },
  unmounted() {
    if (GraphIns) {
      GraphIns.destroy();
    }
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    init() {
      setTimeout(() => {
        // this.doRender_();
        this.doProcessData();
      }, 300)
    },
    doProcessData() {
      const that = this;
      function buildTree(data) {
        // 创建一个映射表，用于快速查找每个节点
        const map = new Map();
        // 初始化树结构数组
        const tree = [];
        // 遍历数组，将每个节点添加到映射表中
        data.forEach(item => {
          map.set(item.id, { ...item, children: [] });
        });
        // 再次遍历数组，构建树结构
        data.forEach(item => {
          const current = map.get(item.id);
          if (item.pID === null || !map.has(item.pID)) {
            // 如果 pid 为 null 或未找到父节点，则将当前节点作为根节点
            tree.push(current);
          } else {
            // 否则，找到父节点，并将当前节点添加到父节点的 children 数组中
            const parent = map.get(item.pID);
            parent.children.push(current);
          }
        });
        // 返回构建好的树结构数组
        return tree;
      }
      // 供热范围的数据
      const ALL_DATA_AREA = []
      // 换热站
      const ALL_DATA_HR = []
      // 热源
      const ALL_DATA_RY = []
      // 企业
      const ALL_DATA_EN = []
      // 企业
      function Func4(res) {
        const obj = Object.create(null);
        res.features.forEach(v => {
          const pro = v.properties;
          const DWMC = pro.DWMC
          if (!obj[DWMC]) {
            obj[DWMC] = 1;
          } else {
            obj[DWMC]++
          }
        });
        Object.keys(obj).forEach(v => {
          ALL_DATA_EN.push({
            pID: 'en',
            id: v,
            text: v,
          })
        });
        // 合并所有数据
        const ALL_DATA = [...ALL_DATA_AREA, ...ALL_DATA_HR, ...ALL_DATA_RY, ...ALL_DATA_EN];
        // 构建树结构
        let resultTree = buildTree(ALL_DATA);
        resultTree = resultTree.filter(v => { return v.pID === 'en' })
        that.doRender_(resultTree);
        // that.doRender(resultTree)
      }
      // 热源
      function Func3() {
        // 获取换热站的数据
        Api.getDataOfGRZ({
          ids: [],
          // // 换热站名称 热源主键编码
          fields: ['SMID', 'HRZBM', 'ZDMC', 'ZJBM', 'DWMC', 'RYDZ', 'FZR', 'LXFS', 'HRZ_COUNT'],
          attributeFilter: 'SMID > 0'
        }).then(res => {
          const copy = JSON.parse(JSON.stringify(res))
          res.features.forEach((ele, i) => {
            // 自定义 ID
            ele.properties.id = ele.properties.ZJBM;
            // 父级 ID 也就是换热站 ID
            ele.properties.pID = ele.properties.DWMC;
            ele.properties.text = ele.properties.ZDMC;
            ALL_DATA_RY.push(ele.properties)
          })
          that.defaultCollapseNode = ALL_DATA_RY.map(v => v.id);
          console.log(ALL_DATA_RY)
          Func4(copy)
        })
      }

      function Func2() {
        // 获取换热站的数据
        Api.getDataOfHRZ({
          ids: [],
          // // 换热站名称 热源主键编码
          fields: ['SMID', 'HRZMC', 'ZJBM', 'GRZZJBM', 'RYMC', 'ZDMC', 'XQ_COUNT', 'SFZG'],
          attributeFilter: 'SMID > 0'
        }).then(res => {
          res.features.forEach((ele, i) => {
            // 自定义 ID
            ele.properties.id = ele.properties.ZJBM;
            // 父级 ID 也就是换热站 ID
            ele.properties.pID = ele.properties.GRZZJBM;
            ele.properties.text = ele.properties.HRZMC;
            ALL_DATA_HR.push(ele.properties)
          })
          Func3();
        })
      }

      function Func1() {
        // 获取供热站的数据
        Api.getDataOfGRFW({
          ids: [],
          // 区域名称 换热站名称 换热站编码
          fields: ['SMID', 'QYMC', 'HRZMC', 'HRZBM'],
          attributeFilter: 'SMID > 0'
        }).then(res => {
          let temOBJ = Object.create(null);
          res.features.forEach((ele, i) => {
            // 自定义 ID
            ele.properties.id = ele.properties.SMID;
            // 父级 ID 也就是换热站 ID
            ele.properties.pID = ele.properties.HRZBM;
            // name 唯一 目前供热的小区存在 name 重复的情况？
            if (temOBJ[ele.properties.QYMC]) {
              temOBJ[ele.properties.QYMC]++
              ele.properties.text = ele.properties.QYMC + temOBJ[ele.properties.QYMC]
            } else {
              temOBJ[ele.properties.QYMC] = 1
              ele.properties.text = ele.properties.QYMC + ' '
            }
            ALL_DATA_AREA.push(ele.properties)
          });
          Func2();
        })
      }
      Func1();
    },
    async doRender_(resultTree) {
      const data = {
        id: '供热系统',
        depth: 0,
        children: resultTree
      }
      const that = this;

      GraphIns = new G6.Graph({
        container: 'Knowledge-map-chart',
        autoFit: 'view',
        padding: 50,
        data: G6.treeToGraphData(data),
        node: {
          style: {
            size: (d) => {
              return that.categoriesData[d.depth].size
            },
            fill: (d) => {
              return that.categoriesData[d.depth].color
            },
            labelText: (d) => d.text,
            labelBackground: true,
            labelFontSize: (d) => {
              return that.categoriesData[d.depth].labelFontSize
            },
            labelFontFamily: 'Gill Sans',
          },
        },
        edge: {
          type: 'cubic-radial',
          style: {
            lineWidth: 2,
            stroke: '#666'
          },
        },
        layout: {
          type: 'compact-box',
          radial: true,
          direction: 'RL',
          getVGap: () => 80,
          getHGap: () => 200,
          preLayout: false,
          linkDistance: 100,
        },
        behaviors: [
          'drag-canvas',
          'zoom-canvas',
          'drag-element',
          'click-select',
          {
            type: 'collapse-expand',
            key: 'collapse-expand-1',
            trigger: 'click', // 修改触发方式为单击
            animation: true, // 启用动画效果
          },
          {
            key: 'hover-activate',
            type: 'hover-activate',
            degree: 5,
            direction: 'in',
            inactiveState: 'inactive',
          },
        ],
        transforms: ['place-radial-labels'],
        animation: false,
        plugins: [
        ],
      });

      GraphIns.render();
      setTimeout(() => {
        this.defaultCollapseNode.forEach(v => {
          GraphIns.collapseElement(v, {
            animation: true
          });
        })
        this.active = true;
      }, 0)
    },
    doClose() {
      this.$emit('close')
    }
  }
});
</script>
<template>
  <!-- self-modal-class -->
  <el-dialog modal-class="" append-to-body v-model="dialogVisible" width="80vw" @close="doClose">
    <template #header>
      <span class="font-alimamashuheiti" style="color: #000; font-size: 2rem">
        智慧供热监控系统·知识图谱
      </span>
    </template>
    <div id="Knowledge-map-chart" :class="[
      active? 'active': ''
    ]">
    </div>
  </el-dialog>
</template>
<style lang="less">
.el-overlay.self-modal-class {
  & .el-dialog {
    background-color: #000;
    background-image: linear-gradient(to right, rgba(4, 30, 60, 0.9), rgba(4, 30, 60, 0.8));
  }

  & .el-dialog__title {
    color: #fff;
  }
}
</style>
<style scoped lang="less">
#Knowledge-map-chart {
  height: 80rem;
  opacity: 0;
  // border: 1px solid tomato;
  &.active {
    opacity: 1;
  }
}
</style>